<template>
    <el-card class="app-container">
      <div>
      <div class="search">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline" label-width="120">
          <el-row>
            <el-col :span="5">
              <el-form-item label="审批人" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="创建时间" props="dateRange">
                <el-date-picker
                  v-model="queryParams.dateRange"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态" props="status">
                <el-select
                  v-model="queryParams.status"
                  placeholder="字典状态"
                  clearable
                >
                  <el-option
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="审批人审批人审批人" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="审批人111111111111111" props="user">
                <el-input v-model="queryParams.user" placeholder="审批人" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary">搜索</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="content">
        <div class="ct-btns">
          <el-button type="primary">新增</el-button>
          <el-button type="danger">批量删除</el-button>
          <el-button type="success">批量导入</el-button>
          <el-button type="warning">批量导出</el-button>
        </div>
        <div class="ct-table">
          <elTables 
            :table-data="tableData" 
            :columns="tableColumns" 
            :handle-current-change="handleCurrentChange"
            isPagin
            :curHeight="tableHeight"
          />
        </div>
      </div>
    </div>
    </el-card>
  </template>
  <script>
  const defaultQueryParams = {
    pageNum: 1,
    pageSize: 10,
  };
  export default {
    data() {
      return {
        tableHeight:0,
        queryParams: {
          user: '',
          region: ''
        },
        tableColumns: [
          {
            key: "createBy",
            title: "上传人",
          },
          {
            key: "identifyStatus",
            title: "状态",
          },
          {
            title: "操作",
            align: "center",
            fixed:'right',
            width: 180,
            render: (h, params) => {
              return h("div", [
                h(
                  "el-button",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    on: {
                      click: () => {
                      },
                    },
                  },
                  "详情"
                ),
                h(
                  "el-button",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    on: {
                      click: () => {
                      },
                    },
                  },
                  "详情"
                ),
                h(
                  "el-button",
                  {
                    props: {
                      type: "text",
                      size: "small",
                    },
                    on: {
                      click: () => {
                      },
                    },
                  },
                  "删除"
                ),
              ]);
            },
          },
        ],
        tableData:[
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
          {createTime:'2023-10-12',fileCount:10,createBy:'张三',identifyStatus:'成功'},
        ],
        queryParams:{
          ...defaultQueryParams
        },
        total:22,
        // 状态数据字典
        statusOptions: [],
      }
    },
    created(){
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });
    },
    mounted(){
      this.$nextTick(() => {
        this.getTableHeight();
      })
    },
    methods: {
      getTableHeight(){
        let height=document.getElementsByClassName('ct-table')[0].clientHeight;
        console.log('height',height);
        this.tableHeight= height - 40;
      },
      onSubmit() {
        console.log('submit!');
      },
      handleCurrentChange(val) {
        console.log('val',val)
      },
    }
  }
  </script>    
  <style lang="scss" scoped>
  
  </style>